<template>
	<view class="mineInfoContainer">
		<view class="mineInfoItem flex" style="height: 160rpx;" @click="uploadHeadPic()">
			<view class="mineInfoLabel" style="line-height: 160rpx;">头像</view>
			<image v-if="userInfo.headPortrait && userInfo.headPortrait!='undefined'" :src="userInfo.headPortrait" class="userHeadPic"></image>
			<image v-else src="../../static/images/userHeadPic.png" class="userHeadPic"></image>
			<image src="../../static/images/moreIconHui.png" class="moreIconHui" style="margin-top: 68rpx;"></image>
		</view>
		<view class="mineInfoItem flex" @click="jumpPage(1)">
			<view class="mineInfoLabel">姓名</view>
			<view class="mineInfoTxt txtOverFlow">{{userInfo.userName && userInfo.userName != 'null' && userInfo.userName != 'undefined' ? userInfo.userName : ''}}</view>
			<image src="../../static/images/moreIconHui.png" class="moreIconHui"></image>
		</view>
		<view class="mineInfoItem flex">
			<view class="mineInfoLabel">学校</view>
			<view class="mineInfoTxt">{{userInfo.schoolName && userInfo.schoolName != 'null' && userInfo.schoolName != 'undefined' ? userInfo.schoolName : ''}}</view>
			<!-- <image src="../../static/images/moreIconHui.png" class="moreIconHui"></image> -->
		</view>
		<view class="mineInfoItem flex" @click="jumpPage(2)">
			<view class="mineInfoLabel">手机</view>
			<view class="mineInfoTxt">{{userInfo.mobilePhone ? userInfo.mobilePhone : ''}}</view>
			<image src="../../static/images/moreIconHui.png" class="moreIconHui"></image>
		</view>
		<view class="mineInfoItem flex" @click="jumpPage(3)">
			<view class="mineInfoLabel">邮箱</view>
			<view class="mineInfoTxt">{{userInfo.email && userInfo.email != 'null' && userInfo.email != 'undefined' ? userInfo.email : ''}}</view>
			<image src="../../static/images/moreIconHui.png" class="moreIconHui"></image>
		</view>
		<button type="primary" class="loginOutBtn" @click="loginOut()">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userImgPath:'',
				userInfo: {}
			}
		},
		onShow() {
			this.searchUserInfo();
		},
		methods: {
			jumpPage(flag) {
				let inputVal = this.userInfo.userName;
				if(flag == 2) {
					inputVal = this.userInfo.mobilePhone;
				}else if(flag == 3) {
					inputVal = this.userInfo.email;
				}
				uni.navigateTo({
					url: '/pages/editUserInfo/editUserInfo?type='+flag+'&inputVal='+inputVal,
				});
			},
			uploadHeadPic() {
				let _this = this;
				wx.chooseImage({
					count: 1,
					success:(res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: getApp().globalData.serverUrl+'/file/file/api/single', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								token: getApp().globalData.token,
								file: tempFilePaths[0],
								relative: 'guoshiUserHeadPic',
								appCode: 'guoshiUserHeadPic'
							},
							success: (uploadFileRes) => {		
								let imgData = JSON.parse(uploadFileRes.data);
								console.log(imgData)
								setTimeout(()=> {
									_this.editUserPic(imgData.filePreviewPathFull);
								})
							}
						});
					}
				})
			},
			editUserPic(headPortrait) {
				let _this = this;
				this.$utils.requestFun('/member/memberSchoolUsers/api/updateMemberUser?route=member',{
					token: getApp().globalData.token,
					headPortrait: headPortrait
				},'GET').then(res=> {
					uni.showToast({
						title: '修改成功！',
						success() {
							setTimeout(()=> {
								_this.searchUserInfo();
							},1000)
						}
					})
				})
			},
			searchUserInfo() {
				let _this = this;
				this.$utils.requestFun('/member/memberSchoolUsers/api/selectMemberUserInfoByToken?route=member',{
					token: getApp().globalData.token
				},'GET').then(res=> {
					_this.userInfo = res.data.data;
					if(res.data.data.userName && (res.data.data.userName == res.data.data.mobilePhone)) {
						uni.getStorage({
						    key: 'userInfo',
						    success: function (res) {
						       _this.userInfo.userName = res.data.nickName;
						    }
						});
					}
				})
			},
			//退出登录
			loginOut() {
				uni.clearStorage();
				uni.showToast({
					title: '退出成功！',
					icon: 'none',
					success() {
						setTimeout(()=> {
							// #ifdef MP-WEIXIN
								uni.reLaunch({
									url: '/pages/login/login',
								});		
							// #endif
								
							// #ifdef H5
								uni.reLaunch({
									url: '/pages/authorizeLogin'	,
								})
							// #endif
						},1000)
					}
				})
			}
		}
	}
</script>

<style>
	.mineInfoContainer {
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
	}
	.txtOverFlow {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.flex {
		display: flex;
	}
	.mineInfoItem {
		width: 95%;
		height: 110rpx;
		padding: 0 25rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.mineInfoLabel {
		width: 30%;
		text-align: left;
		font-size: 32rpx;
		color: #222222;
		line-height: 110rpx;
	}
	.mineInfoTxt {
		width: 60%;
		text-align: right;
		font-size: 32rpx;
		color: #222222;
		line-height: 110rpx;
		margin-right: 21rpx;
	}
	.moreIconHui {
		width: 22rpx;
		height: 24rpx;
		margin-top: 46rpx;
	}
	.userHeadPic {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		margin-right: 21rpx;
		margin-left: 44%;
		margin-top: 25rpx;
	}
	.loginOutBtn {
		width: 90%;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;	
		font-size: 32rpx;
		color: #FFFFFF;
		background: linear-gradient(90deg, #19AD78, #1EBE85);
		border-radius: 49rpx;
		position: fixed;
		bottom: 20rpx;
		left: 5%;
	}
</style>
